<template>
  <div class="collect">

    <div class="list-box">

      <div class="li clearfix" v-for="(item,index) in wishlist" v-if="item.stock !=0" v-on:click="buyFn(item.product_id)">
        <div class="fc-div clearfix">
          <a>
            <div class="left img">
              <img :src="item.thumb" alt="">
            </div>
            <div class="left font">
              <div class="a-tt">{{item.name}}</div>
              <div class="a-pr">{{item.price}}</div>
            </div>
          </a>
        </div>
        <div class="fr-div">
          <img class="icon2" src="../../assets/images/che.png" />
        </div>
      </div>
    </div>

  </div>
</template>

<script>

export default {
  name: 'Collect',
  data () {
    return {
      wishlist: []
    }
  },
  methods:{
    wishlistGet:function(){

      var ajaxData = {};
      ajaxData.token = sessionStorage.user && JSON.parse(sessionStorage.user).token;
      var _this = this;

      $.ajax({
        type:'post',
        url: RouteMap.wishlistGet,
        data:ajaxData,
        success:function(res){
          if(res.code == 200){
            _this.wishlist = res.data.products;
          }
          else{
            //Toast(res.msg)
          }
        }
      })
    },
    buyFn:function(id){

      var isLogin = sessionStorage.user && JSON.parse(sessionStorage.user).login || 0;
      if(!isLogin){

        this.$router.push({path:'/login',query: {redirect: location.hash.replace('#','')}});
      }
      else{
        var productId = id;
        var cardAddData = {};
        cardAddData.product_id = productId;
        cardAddData.quantity = 1;
        cardAddData.type = 1;
        cardAddData.token = sessionStorage.user && JSON.parse(sessionStorage.user).token;
        var _this = this;

        $.ajax({
          type:'post',
          url: RouteMap.cardAdd,
          data:cardAddData,
          success:function(res){
            if(res.code == 200 || res.code == 203){

              _this.$router.push({path:'/me/order?productId='+id});

            }
            else{
              //Toast(res.msg)
            }
          }
        })

      }
    }
  },
  mounted:function(){

    this.wishlistGet();
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

  .list-box{

  }
  .list-box .li{
    padding: .5rem;
    font-size: .6rem;
    border-bottom: 1px solid #c2c2c2;
    display:-webkit-box;
    justify-content: space-between;
    color: #707070;
  }
  .list-box .li a{
    color: #707070;
  }
  .list-box .shixiao{
    color: #c2c2c2;
  }
  .list-box .shixiao a{
    color: #c2c2c2;
  }
  .list-box .li .fl-div{
    width: 1.5rem;
  }
  .fl-div span{
    display: inline-block;
    margin-top: 1.4rem;
  }
  .list-box .li .fc-div{
    width: 13rem;
  }
  .list-box .li .fr-div{
    width: 1.2rem;
    text-align: right;
    padding-top: 1rem;
  }
  .list-box .li .fr-div img{
    width: 100%;
  }
  .list-box .li .left img{ width:3rem }
  .fc-div .img{
    width: 3rem;
  }
  .fc-div .font{
    width: 7.5rem;
    margin-left: .5rem;
    margin-top: .5rem;
  }
  .overdue{
    background: #f5f5f5;
    border-radius: .2rem;
    padding: .1rem .1rem;
    font-size: .5rem;
  }
  .clear-box{
    text-align: center;
    padding-top: .5rem;
  }
  .clear-box .clear{
    display: inline-block;
    background: #f5f5f5;
    color: #707070;
    padding: .2rem .8rem;
    border-radius: .4rem;
  }
</style>
